<template>
  <div class="auth-wrapper">
    <el-form
      size="large"
      :model="formState"
      class="auth-form"
      label-position="top"
    >
      <h1 class="auth-form__title">
        {{ $t('login.tips.tip') }}CDN{{ $t('login.tips.tip1') }}
      </h1>
      <el-tabs v-model="active" class="auth-form__tabs">
        <el-tab-pane :label="$t('login.tips.tip2')" name="account">
          <el-form-item :label="$t('login.tips.tip4')">
            <el-input
              v-model.trim="formState.account"
              :placeholder="$t('login.rules.account')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('login.tips.tip5')" class="mb-0">
            <el-input
              v-model.trim="formState.password"
              :placeholder="$t('login.rules.password')"
              type="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div class="flex items-center justify-end w-full">
              <el-link :underline="false" class="font-normal" type="primary"
                >{{ $t('login.tips.tip6') }}?</el-link
              >
            </div>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane :label="$t('login.tips.tip3')" name="email">
          <el-form-item :label="$t('login.tips.tip7')">
            <el-input
              v-model.trim="formState.email"
              :placeholder="$t('login.rules.email')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('login.tips.tip8')" class="mb-[62px]">
            <el-input
              v-model.trim="formState.code"
              :maxlength="6"
              :placeholder="$t('login.rules.code')"
            >
              <template #suffix>
                <el-link
                  type="primary"
                  :underline="false"
                  class="text-[14px] font-normal select-none"
                  >{{ $t('login.tips.tip9') }}</el-link
                >
              </template>
            </el-input>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button
          type="primary"
          class="auth-form__submit"
          :loading="loading"
          @click="handleSubmit"
          >{{ $t('login.tips.tip10') }}</el-button
        >
      </el-form-item>
      <div class="flex justify-center text-[12px] tips-text">
        <section>
          {{ $t('login.tips.tip11') }}
          <el-link
            :underline="false"
            class="text-[12px] font-normal"
            type="primary"
            >{{ $t('login.tips.tip12') }}</el-link
          >
        </section>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { omit } from 'lodash-es'

const active = ref('account')
const loading = ref(false)

const appStore = useAppStore()
interface FormState {
  account: string
  password: string
  email: string
  code: string
  key: string
}
const formState = ref<FormState>({
  account: 'admin',
  password: 'abcd.1234',
  email: 'test001@gmail.com',
  code: '937662',
  key: ''
})

/**
 * 登录事件
 */
const handleSubmit = () => {
  const data =
    active.value === 'account'
      ? omit(formState.value, 'email', 'code')
      : omit(formState.value, 'account', 'password', 'key')
  loading.value = true
  appStore.signInAction(data).finally(() => (loading.value = false))
}
</script>

<style scoped lang="scss">
.auth-wrapper {
  @apply w-screen h-screen relative;

  background: url('@/assets/modules/auth/bg.jpg') no-repeat center center;
  background-size: cover;

  .auth-form__tabs {
    :deep(.el-tabs__header) {
      @apply mb-8;

      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }

        .el-tabs__item {
          padding: 0 16px;

          &:nth-of-type(2) {
            padding-left: 0 !important;
          }
        }
      }
    }
  }

  .auth-form {
    @apply absolute top-1/2 text-[14px] rounded-xl bg-white py-14 px-[50px];

    transform: translateY(-50%);
    width: 420px;
    height: 558px;
    right: 15.6%;
    background-color: #fff;
    box-shadow: 2px 2px 50px 0 rgba(58, 58, 58, 0.04);

    .tips-text {
      color: #999;
    }

    &__title {
      margin: 0 0 8px;
      font-size: 26px;

      // letter-spacing: 2px;
      font-weight: 600;
    }

    :deep(.el-form-item) {
      .el-form-item__label {
        @apply mb-0;
      }

      .el-input__wrapper {
        padding: 1px 0;
        border-radius: 0;
        box-shadow: 0 1px #e7e7e7;

        &:hover,
        &.is-focus {
          box-shadow: 0 1px var(--el-input-focus-border-color);
        }
      }
    }

    &__submit {
      @apply w-full  rounded-[4px];

      background: #1562fc;
      box-shadow: 2px 2px 16px 0 rgba(21, 98, 252, 0.5);
    }
  }
}
</style>
